<!-- ts语法的函数式组件 -->
<template>
  <div class="app-container">
    <a-layout class="layout-root">
      <a-layout-header class="layout-header">
          <Hello></Hello>
      </a-layout-header>
      <a-layout class="layout-main" :has-sider="true">
        <a-layout-sider class="layout-sider">
          <a-menu theme="dark" mode="inline">
            <a-menu-item :key="1">
              <template #icon>
                <QuestionCircleOutlined />
              </template>
              <router-link to="/s1">菜单1</router-link>
            </a-menu-item>
            <a-menu-item :key="2">
              <template #icon>
                 <demo-icon icon="form-outlined"></demo-icon>
              </template>
              <router-link to="/s2">菜单2</router-link>
            </a-menu-item>
            <a-menu-item :key="3">
               <template #icon>
                <demo-icon icon="warning-outlined"></demo-icon>
              </template>
              <router-link to="/s3">菜单3</router-link>
            </a-menu-item>
            <a-sub-menu :key="3" title="菜单4">
              <a-menu-item :key="41"> 菜单41 </a-menu-item>
              <a-menu-item :key="42"> 菜单42 </a-menu-item>
            </a-sub-menu>
          </a-menu>
        </a-layout-sider>
        <a-layout-content class="layout-content">Content</a-layout-content>
      </a-layout>
    </a-layout>
  </div>
</template>

<script setup lang="ts">
import { QuestionCircleOutlined,FormOutlined,WarningOutlined,ClockCircleOutlined} from '@ant-design/icons-vue'
import DemoIcon from './plus/DemoIcon.vue'
import Hello from './plus/DemoIcon.ts'
</script>


<style>
html,
body,
#app {
  height: 100%;
  margin: 0;
}

.app-container {
  height: 100%;
  width: 100%;
}

.layout-root {
  height: 100%;
  width: 100%;
}

.layout-header {
  background-color: #add8e6 !important; /* 浅蓝色 */
  color: black;
  height: 64px;
  line-height: 64px;
  padding: 0 16px;
}

.layout-main {
  height: calc(100% - 64px);
  display: flex;
}

.layout-sider {
  background-color: #f4cccc !important; /* 浅红色 */
  color: black;
  width: 200px;
}

.layout-content {
  background-color: #90ee90;
  flex: 1; /* 撑满剩余宽度 */
  padding: 16px;
  color: black;
}
</style>
